<template>
  <div class="dis-flex">
    <slot v-if="!isMultiple" name="before"></slot>
    <span v-if="!isMultiple">
      <span class="btn btn-font16 btn-primary" @click="setMultiple()">多选</span>
    </span>
    <span v-if="isMultiple">
      <span class="btn" @click="handleCheckAllChange()">
        <el-checkbox class="btn-font16 btn-primary readonly" v-model="isCheckAll"
          :checked="isCheckAll" :indeterminate="isIndeterminate">全选</el-checkbox>
      </span>
      <span class="split bg-gray80"></span>
      <span class="btn btn-font16 btn-primary" @click="confirm()">确认</span>
      <span class="btn btn-font16 btn-danger" @click="cancel()">取消</span>
    </span>
  </div>
</template>
<script>
export default {
  props:{
    isCheckAll:Boolean,
    isIndeterminate:Boolean,
  },
  data () {
    return {
      isMultiple:false,
    }
  },
  methods: {
    handleCheckAllChange(){
      if(!this.isMultiple){return}
      this.$emit('checkAll',!this.isCheckAll)
    },
    setMultiple(){
      this.isMultiple = true;
      this.$emit('setMultiple');
    },
    confirm(){
      this.isMultiple = false;
      this.$emit('confirm');
    },
    cancel(){
      this.isMultiple = false;
      this.$emit('cancel')
    },
  },
  mounted: function() {},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.readonly{
  pointer-events: none;
}
.split{
  display:inline-block;
  vertical-align: middle;
  width: 1px;height: 20px;
  margin:auto 10px auto 6px;
}
.btn{
  margin:auto 4px auto 0;
}
</style>